<template>
  <div class="gm-xc">
    <loading v-if="!albumsData" />
    <div class="info-text" v-else-if="!albumsData.length">
      <p>
        <i class="el-icon-camera"></i>
      </p>
      <p>
        没有获取到您的
        <span>相册</span>数据，请前往导航栏的管理数据-
        <span>相册操作</span>版块进行完善。
      </p>
      <p>
        <router-link to="/users/gm_xc">或者点击这里完善资料</router-link>
      </p>
    </div>
    <div v-else class="item">
      <div class="album-show">
        <div class="title">
          <span>您的相册</span>
          <span>{{ albumsData.length }}/{{ albumMAX }}</span>
        </div>
        <div class="content">
          <ul>
            <li v-for="data in albumsData" :key="data.name">
              <div class="li-wrapper">
                <div
                  class="img"
                  @click="showChildrenPhoto(data)"
                  :style="{backgroundImage: 'url(' + getFirstPhoto(data.name) + ')'}"
                >
                  <!-- <img :src="getFirstPhoto(data.name)" alt /> -->
                  <span class="num">{{ data.photosNumber }}</span>
                  <div class="tags" v-if="data.tags.length">
                    <span v-for="tag in data.tags" :key="tag">{{ tag }}</span>
                  </div>
                </div>
                <div class="introduce">
                  <div class="int-label">{{ data.name }}</div>
                  <!-- <div class="desc">{{ data.desc }}</div> -->
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { imageUrl } from "@/public/uri.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "gm-xc",
  data() {
    return {};
  },
  mounted() {
    if (this.userName) {
      if (!this.albumsData.length) {
        this.getAlbumsData(this.userName);
      }
      if (!this.userPhotosData.length) {
        this.getUserPhotosData(this.userName);
      }
    }
  },
  computed: {
    ...mapState("user", [
      "albumsData",
      "userName",
      "userPhotosData",
      "albumMAX"
    ])
  },
  methods: {
    showChildrenPhoto(data) {
      // let newData = [];
      // let userPhotosData = this.userPhotosData;
      // for (let i = 0; i < userPhotosData.length; i++) {
      //   if (userPhotosData[i].album === data.name) {
      //     newData.push(userPhotosData[i]);
      //   }
      // }
      // this.childrenPhoto = newData;

      this.$router.push(`/users/photoinalbum/${data.name}`);
    },
    getFirstPhoto(name) {
      let userPhotosData = this.userPhotosData;
      for (let i = 0; i < userPhotosData.length; i++) {
        if (userPhotosData[i].album === name) {
          return `${imageUrl}/${userPhotosData[i].photoUrl}`;
        }
      }
      return require("@/assets/pic-none.png");
    },
    ...mapActions("user", ["getAlbumsData", "getUserPhotosData"])
  },
  watch: {
    userName() {
      if (this.userName) {
        if (!this.albumsData.length) {
          this.getAlbumsData(this.userName);
        }
        if (!this.userPhotosData.length) {
          this.getUserPhotosData(this.userName);
        }
      }
    }
  }
};
</script>


<style lang="sass" scoped>
@import '@/assets/default.sass'
.gm-xc
  width: 100%
  height: 100%
  background-color: #fff
  .info-text
    width: 100%
    height: 100%
    padding: 20%
    @include align(flex-start)
    >p
      flex: 0 0 100%
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      overflow: hidden
      >a
        color: #0487dc
        &:hover
          color: #2eb037
      >i
        font-size: 24px
      >span
        color: #2eb037
  .item
    width: 100%
    height: 100%
    overflow: auto
    .album-show
      width: 100%
      height: 100%
      padding: 0 5%
      .title
        width: 100%
        height: 60px
        line-height: 80px
        border-bottom: 1px solid #eee
        @include flex(space-between,center)
        >span
          font-size: 16px
          font-weight: 700
          color: #333
      .content
        width: 100%
        >ul
          width: 100%
          @include align(flex-start)
          >li
            margin: 15px 0 
            padding: 5px
            flex: 0 0 20%
            height: 205px      
            .li-wrapper  
              box-shadow: 0px 0px 2px rgba(0,0,0,.1)
              background-color: #fff
              padding: 5px    
              .img
                width: 100%
                height: 160px                
                cursor: pointer                
                overflow: hidden    
                position: relative
                background-position: 50% 50%
                background-size: cover    
                background-repeat: no-repeat                  
                .num
                  position: absolute
                  top: 3px
                  right: 3px
                  width: 24px
                  height: 16px
                  color: #eb2001
                  border-radius: 5px
                  @include flex(center,center)              
                .tags             
                  transition: all .2s   
                  position: absolute
                  bottom: -30px
                  left: 0
                  width: 100%
                  height: 30px
                  background-color: rgba(0,0,0,.3)
                  padding: 0 3%
                  >span
                    line-height: 30px
                    height: 30px
                    color: #0487dc                  
                    &:after
                      content: " | "
                    &:last-child
                      &:after
                        content: ""  
                &:hover
                  .tags
                    bottom: 0
                    transition: all .2s            
              .introduce              
                width: 100%
                height: 35px
                overflow: hidden
                .int-label
                  width: 100%
                  height: 100%
                  line-height: 40px
                  overflow: hidden
                  text-overflow: ellipsis
                  white-space: nowrap
                  font-size: 16px
                .desc
                  width: 100%
                  height: 40px
                  line-height: 20px                
                  color: #999
                  overflow: hidden
                  display: -webkit-box
                  -webkit-box-orient: vertical
                  -webkit-line-clamp: 2
                  @include align(center)

</style>